<template>
  <div id="formframe">
    开启父表格边框: <el-switch v-model="parentBorder" />
    开启子表格边框: <el-switch v-model="childBorder" />
    <el-table :data="tableData" :border="parentBorder" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.fields" :border="childBorder">
              <el-table-column label="属性名" prop="field_name" />
              <el-table-column label="属性类型" prop="field_type" />
              <el-table-column label="属性描述" prop="field_description" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="表单" prop="form_name" />
      <el-table-column label="添加新的集合">
    <template #default="{ row, $index }">
      <div>
      <button v-if="row.isAdd" :class="{'btn': true, 'disabled': !row.isClickable}" style="width: 30px;height: 30px;margin: 0;background-color: #409eff;" @click="row.isAdd = false">+</button>
    <div v-else>
      <input type="text" v-model="row.collectionName">
      <button class="btn" style="background-color: #409eff;" @click="handleAdd($index)">完成</button>
    </div>
    </div>
    </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { listForm } from '@/utils/api.js'

const parentBorder = ref(true)
const childBorder = ref(true)
const tableData = ref([])
const btn = ref(".btn")



onMounted(() => {
  listForm().then((resp) => {
    for (var i = 0; i < resp.data.data.length; i++) {
      // console.log(resp.data.data[i])
      // tableData.value.push(resp.data.data[i])
      tableData.value.push({
        ...resp.data.data[i],
        isAdd: true,
        collectionName: '',
        isClickable: true, // 新增属性表示按钮是否可点击
      })
    }
  })


})

function handleAdd(index) {
  const row = tableData.value[index]
  if(row.collectionName === ''){
    alert('集合名不能为空!')
    return
  }else{
    alert("添加成功")
    row.isClickable = false // 设置按钮不可点击
    console.log(row.collectionName)
  }
  row.isAdd = true
  row.collectionName = ''
}




</script>

<style>
#formframe {
  padding: 20px;
}
.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}
</style>